layui.use(['table', 'layer'], function () {
    var layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        table = layui.table;

    /**
     * 加载表格数据
     */
    var tableIns = table.render({
        id: 'userList',
        elem: '#userList',   // 容器元素Id属性值
        height: 'full-125',     // 容器的高度（差值）
        url: path + '/class/list', // 数据接口，对应后台接口
        page: true, //开启分页
        cellMinWidth: 95, // 单元格最小的宽度
        limit: 10,  // 默认每页显示的数量
        limits: [10, 20, 30, 40, 50], // 每页页数的可选项
        toolbar: '#toolbarDemo',  // 开启头部工具栏
        cols: [[ // 表头
            // field：与数据库中字段名对应一致
            // title：定义列的标题
            // sort：定义是否可以排序
            // fixed：固定列
            {field: 'id', title: '编号', align: 'center', fixed: 'left', minWidth: 30},
            {field: 'userName', title: '账号', align: 'center'},
            {field: 'nick', title: '昵称', align: 'center', minWidth: 150},
            {field: 'trueName', title: '真实姓名', align: 'center', minWidth: 100},
            {field: 'roleName', title: '组别', align: 'center'},
            {field: 'email', title: '邮箱', align: 'center', minWidth: 180},
            {field: 'phone', title: '联系电话', align: 'center', minWidth: 120},
            {
                field: 'state', title: '排班状态', align: 'center', minWidth: 180, templet: function (d) {
                    // 打印模板栏中的内容
                    // console.log(d)
                    // 调用函数，返回格式化的结果
                    return formatState(d.state);
                }
            },
            // 操作栏
            {title: '操作', templet: '#userListBar', fixed: 'right', align: 'center', minWidth: 150}
        ]]
    });

    /**
     * 格式化状态值
     * 0表示未排班，1表示已排班，其它表示未知状态
     *
     * @param state
     */
    function formatState(state) {
        if (state === 0) {
            return "<div style='color: #b6b605'>未排班</div>"
        } else if (state === 1) {
            return "<div style='color: green'>已排班</div>"
        } else {
            return "<div style='color: red'>未知状态</div>"
        }
    }

    /**
     * 搜索按钮的点击事件
     */
    $(".search_btn").click(function () {
        /**
         * 表格重载
         * 做条件查询功能
         */
        tableIns.reload({
            // 设置需要传递给后端的参数
            where: {
                // 通过文本框的值，设置传递的参数
                userName: $("[name='userName']").val(), // 用户账号
            },
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });

    });

    /**
     * 行工具栏监听事件
     */
    table.on('tool(userTable)', function (data) {
        // 得到对应的用户Id
        var userId = data.data.id;
        // 打开编辑窗口
        openUpdateDialog(userId);

    })

    /**
     * 打开 编辑 的操作窗口
     * 如果用户Id为空则表示添加，用户Id不为空则表示编辑操作
     *
     * @param userId
     */
    function openUpdateDialog(userId) {
        // 定义窗口的标题
        var title = "排班 - 编辑排班信息"
        // 定义窗口的跳转路径
        var url = path + "/class/toUpdatePage?userId=" + userId

        // 打开对话框，在iframe层
        layui.layer.open({
            type: 2,
            title: title, // 弹出层的标题
            area: ['400px', '330px'], // 弹出层的宽高
            content: url, // url地址
            // 可以进行最大化与最小化窗口的操作
            maxmin: true
        });
    }


});
